<template>
  <div class="shelf">
    <div class="fun-btn clear">
      <!--<el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="handleAdd">新增</el-button>
      <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDel">删除</el-button>
      <el-button type="primary" size="small">清空</el-button>-->

      <el-button size="small"
                 type="primary"
                 style="float: right"
                 icon="el-icon-back"
                 @click="$router.go(-1)">返回
      </el-button>
    </div>

    <el-tabs type="border-card" @tab-click="tabClick">

      <el-tab-pane v-for="(item, index) in tabsList" :key="index" :label="item.label">
        <table class="mijijia" cellpadding="5" v-loading="loading">
          <tr v-for="(row, indexRow) in tableData" :key="indexRow">
            <td v-for="(column, indexColumn) in row.row" :key="indexColumn">
              <div class="cell"
                   :class="{'active': column.isArc === 1}"
                   @click="handleCell(column)">
                {{indexRow+1}}-{{indexColumn+1}}
              </div>
            </td>
          </tr>
        </table>
      </el-tab-pane>

    </el-tabs>

    <el-dialog :title="'新增'"
               width="45%"
               top="15vh"
               :destroy-on-close="true"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="dialogAddEdit">
      <div class="import-content">
        <el-form :model="ruleForm"
                 :rules="rules"
                 ref="ruleForm"
                 label-width="100px"
                 class="demo-ruleForm">
          <el-form-item label="列数" prop="name">
            <el-input size="small" v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="行数" prop="name">
            <el-input size="small" v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="handleQuery">确定</el-button>
            <el-button size="small" @click="dialogAddEdit = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  getDenseFrameArchivesInfoLeft, getDenseFrameArchivesInfoRight
} from '../../../../../api/house/houseArchives'

export default {
  name: 'ShelfInside',
  data () {
    return {
      loading: false,
      dialogAddEdit: false,
      dialogTitle: '',
      tabsList: [{
        label: '密集架（左）'
      }, {
        label: '密集架（右）'
      }],
      ruleForm: {
        name: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }
        ]
      },
      tableData: []
    }
  },
  mounted () {
    this.getList(0)
  },
  methods: {
    getList (index) {
      // 左边
      this.loading = true
      const request = Number(index) === 0
        ? getDenseFrameArchivesInfoLeft(this.$route.query.id)
        : getDenseFrameArchivesInfoRight(this.$route.query.id)

      request.then(res => {
        this.tableData = res.data.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    tabClick (val) {
      this.getList(val.index)
    },
    handleCell (column) {
      this.$router.push({
        path: '/warehouseArchives/upperArchives',
        query: {
          idColumn: column.idColumn,
          idRow: column.id
        }
      })
    },
    handleAdd () {
      // 新增
      this.dialogAddEdit = true
    },
    handleQuery () {
      // 确定新增
      this.dialogAddEdit = false
    },
    handleDel () {
      // 删除
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleRowClick (row, column, event) {
      console.log(row, column, event)
      this.$router.push('/warehouseArchives/upperArchives')
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../../styles/mixin";

  .shelf {

    .import-content {
      padding-right: 40px;
    }

    ::v-deep .el-tab-pane {
      height: calc(100vh - 170px);
      padding: 15px;
      margin: -15px;
      overflow-y: auto;
    }

    .mijijia {
      max-width: 100%;

      .cell {
        background: #e7e7e7;
        @include sc(16px, #000);
        @include wh(150px, 60px);
        text-align: center;
        line-height: 60px;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }

        &.active {
          background: #a47320;
          color: #fff;
        }
      }
    }
  }

</style>
